<template>
  <div class="receipt-info">
    <div class="info-list">
      <div class="left">故障原因</div>
      <div class="right">{{ receiptInfo ? receiptInfo.reason : '' }}</div>
    </div>
    <div class="info-list">
      <div class="left">处理方式</div>
      <div class="right">{{ receiptInfo ? receiptInfo.process_type : '' }}</div>
    </div>
    <div class="info-list">
      <div class="left">回执内容</div>
      <div class="right">{{ receiptInfo ? receiptInfo.reason : '' }}</div>
    </div>
    <div class="info-list">
      <div class="left">现场照片</div>
      <div class="right" v-if="receiptInfo">
        <CustomImage :src="item?item.image_url:''" v-for="item in receiptInfo.images" :key="item.id" :errortype="true"
                     style="width: 100px;height: 100px;"/>
      </div>
    </div>
    <!--    <div class="info-list">-->
    <!--      <div class="left">备件</div>-->
    <!--      <div class="right">-->
    <!--        <div class="right">点击查看备件信息</div>-->
    <!--      </div>-->
    <!--    </div>-->
    <div style="margin-top: 35px;">
      <div style="margin-bottom: 10px;">本次服务项目费用明细</div>
      <div class="right">
        <el-table :data="receiptInfo.services" border style="width: 100%">
          <el-table-column align="center" label="项目名称" prop="name" width="180"/>
          <el-table-column align="center" label="数量" prop="count" width="180"/>
          <el-table-column align="center" label="单位" prop="unit" width="180"/>
          <el-table-column align="center" label="费用" prop="fee_format"/>
        </el-table>
      </div>
    </div>
<!--    <div style="margin-top: 35px;">-->
<!--      <div style="margin-bottom: 10px;">本次服务使用配件费用明细</div>-->
<!--      <div class="right">-->
<!--        <el-table :data="tableData" border style="width: 100%" show-summary :summary-method="getSummaries">-->
<!--          <el-table-column align="center" label="编号" prop="t1" width="180"/>-->
<!--          <el-table-column align="center" label="名称" prop="t2" width="180"/>-->
<!--          <el-table-column align="center" label="规格型号" prop="t3"/>-->
<!--          <el-table-column align="center" label="使用数量" prop="t4"/>-->
<!--          <el-table-column align="center" label="单位" prop="t5"/>-->
<!--          <el-table-column align="center" label="单价" prop="t6"/>-->
<!--          <el-table-column align="center" label="费用" prop="t7"/>-->
<!--        </el-table>-->
<!--      </div>-->
<!--    </div>-->
    <div class="info-list">
      <div class="left">客户签名</div>
      <div class="right">
        <img alt="" class="customer-name" :src="receiptInfo?receiptInfo.signature_url:''">
      </div>
    </div>
    <div class="info-list">
      <div class="left">客户评价</div>
      <div class="right">
        <div class="t1">
          <span>客户满意度</span>
          <el-rate v-model="satisfaction" :texts="['极差', '失望', '一般', '满意', '惊喜']" disabled show-text
                   text-color="#ff9900"></el-rate>
        </div>
        <div class="t1">
          <span>服务态度</span>
          <el-rate v-model="attitude" :texts="['极差', '失望', '一般', '满意', '惊喜']" disabled show-text
                   text-color="#ff9900"></el-rate>
        </div>
        <div class="t1">
          <span>服务效率</span>
          <el-rate v-model="efficiency" :texts="['极差', '失望', '一般', '满意', '惊喜']" disabled show-text
                   text-color="#ff9900"></el-rate>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CustomImage from "@/components/CustomImage.vue";

export default {
  props: ['receiptInfo'],
  components: {
    CustomImage
  },
  data() {
    return {
      //服务效率
      efficiency: 0,
      //服务态度
      attitude: 0,
      //客户满意度
      satisfaction: 0,
      value: "",
      tableData: [
        {t1: "S10001", t2: '接口模块', t3: 'XH001', t4: '1', t5: '个', t6: '100', t7: '100'},
        {t1: "S10002", t2: '接口模块', t3: 'XH002', t4: '2', t5: '个', t6: '200', t7: '400'}
      ],
      value1: 3
    }
  },
  methods: {
    // 表格合计的，后台处理了钱数数据
    getSummaries(param) {
      const {columns, data} = param;
      const sums = [];
      let total = 0
      data.forEach((item) => {
        total += parseInt(item.t7)
      }),
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '配件合计金额';
            return;
          }
          //判断column.property，可以根据需要特殊处理数据，此处只有金额统计
          switch (column.property) {
            case "t7":
              sums[6] = total + '元'
              break;

            default:
              break;
          }
        });

      return sums;
    },
  },
}
</script>

<style lang="scss" scoped>
.info-list {
  margin-top: 35px;
  display: flex;

  .left {
    width: 100px;
  }
}

.t1 {
  display: flex;
  margin-bottom: 20px;

  span {
    width: 100px;
  }

  &:nth-child(3) {
    margin-bottom: 0;
  }
}

.customer-name {
  width: 300px;
  height: 120px;
  border: 1px solid #eeeeee;
}
</style>
